<template>
  <MainLayout>
    <router-view></router-view>
    <div class="report-management">
    <h2>报表管理</h2>
    
    <!-- 报表筛选条件 -->
    <el-form :inline="true" class="filter-form">
      <el-form-item label="报表类型">
        <el-select v-model="filter.type" placeholder="请选择报表类型">
          <el-option label="销售报表" value="sales" />
          <el-option label="库存报表" value="inventory" />
          <el-option label="用户报表" value="user" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="filter.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="generateReport">生成报表</el-button>
        <el-button type="success" @click="exportReport">导出报表</el-button>
      </el-form-item>
    </el-form>

    <!-- 报表展示 -->
    <el-table
      :data="reportData"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="date" label="日期" />
      <el-table-column prop="sales" label="销售额" />
      <el-table-column prop="orders" label="订单数" />
      <el-table-column prop="users" label="新增用户" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />
  </div>
  </MainLayout>
</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue'
export default {
  components: {
    MainLayout
  },  
  data() {
    return {
      filter: {
        type: '',
        time: []
      },
      reportData: [],
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10
    };
  },
  methods: {
    generateReport() {
      if (this.filter.type && this.filter.time.length === 2) {
        this.loading = true;
        // 模拟异步请求
        setTimeout(() => {
          this.reportData = [
            { date: '2023-10-01', sales: 10000, orders: 50, users: 10 },
            { date: '2023-10-02', sales: 12000, orders: 60, users: 15 }
          ];
          this.total = this.reportData.length;
          this.loading = false;
        }, 1000);
      }
    },
    exportReport() {
      if (this.reportData.length > 0) {
        // 模拟导出功能
        this.$message({
          type: 'success',
          message: '报表导出成功!'
        });
      } else {
        this.$message({
          type: 'warning',
          message: '请先生成报表'
        });
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

<style scoped>
.report-management {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 30px;
  background-color: #fff;
  padding-bottom: 100px;
}

.pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  margin-top: 24px;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.report-management h2 {
  margin-top: 10px;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  text-align: left;
}
</style>